<script setup lang='ts'>
import { ref, nextTick, onMounted, onBeforeUnmount, markRaw } from 'vue'
import * as echarts from 'echarts'
import { useRouter } from 'vue-router'

import { getBarWheelMachine } from '@/api/publicApi'
import { GetBarWheelMachineStaticWarning } from '@/api/home'

// echart实例
const myEcharts = echarts
const chart = ref()
// 设备数量
const str = ref(15)

// 弹框显隐
const dialogVisible = ref(false)
// 选择的模型
const menuPath = ref('')
// 模型数据源
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
// 机器列表
const barwheelmacList = ref([])
// 单个机器列表
const list1: any = ref([])
const list2: any = ref([])
const list3: any = ref([])
const list4: any = ref([])
const list5: any = ref([])

// 选择的堆取料机路径
const selectMenuPath:any = ref([])

// 点击的机器
const device = ref('')

// 正常设备数量
const normalSum = ref(10)
// 一级警报设备数量
const warningLevelSum1 = ref(3)
// 二级警报设备数量
const warningLevelSum2 = ref(2)

// 路由操作
const router = useRouter()

// 需要跳转的路由
const path = ref('')
// 选择的具体设备
const targetDevice = ref('')

const option = {
  title: {
    subtext: `设备数：${str.value}`,
    left: 'center',
    subtextStyle: {
      color: '#fff'
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    textStyle: {
      color: '#fff'
    }
  },
  series: [
    {
      name: '运行状态',
      type: 'pie',
      radius: '50%',
      data: [
        {
          value: 10,
          name: '正常',
          itemStyle: {
            color: '#04d200FF'
          }
        },
        {
          value: 4,
          name: '一级报警',
          itemStyle: {
            color: '#ff8a00FF'
          }
        },
        {
          value: 1,
          name: '二级报警',
          itemStyle: {
            color: 'red'
          }
        }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}
// 定义函数
onMounted(() => {
  
  // 获取堆取料机列表信息
  getBarWheelMachineData()
  // 获取设备状态饼图数据
  getEchartsData()
  
})

// 初始化Echarts图表
const initChart = () => {
  nextTick(() => {
    chart.value = markRaw(myEcharts.init(document.getElementById('echart')))
    option.series[0].data[0].value = normalSum.value
    option.series[0].data[1].value = warningLevelSum1.value
    option.series[0].data[2].value = warningLevelSum2.value
    chart.value.setOption(option)
  })
}

// 获取全部堆取料机信息
const getBarWheelMachineData = async () => {
  let res = await getBarWheelMachine({
    Sorting: 'id',
    SkipCount: 0,
    MaxResultCount: 99
  })
  barwheelmacList.value = res.result.items
  for (let i = 0; i < barwheelmacList.value.length; i++) {
    if (res.result.items[i].gltfName === '12000t/h堆取料机') {
      list1.value.push(res.result.items[i])
      
    } else if (res.result.items[i].gltfName === '9000t/h堆料机') {
      list2.value.push(res.result.items[i])
      
    } else if (res.result.items[i].gltfName === '4200t/h堆料机') {
      list3.value.push(res.result.items[i])
      
    } else if (res.result.items[i].gltfName === '5500t/h取料机') {
      list4.value.push(res.result.items[i])
      
    } else if (res.result.items[i].gltfName === '4200t/h取料机') {
      list5.value.push(res.result.items[i])
      
    }
  }
  console.log('首页获取堆取料机---------->', path.value)
}

// 获取设备状态饼图数据
const getEchartsData = async() => {
  normalSum.value = 0
  warningLevelSum1.value = 0
  warningLevelSum2.value = 0
  let res = await GetBarWheelMachineStaticWarning()
  
  res.result.forEach(item => {
    if (item.warningLevel === 1) {
      warningLevelSum1.value += 1
    } else if (item.warningLevel === 2) {
      warningLevelSum2.value += 1
    } else {
      normalSum.value += 1
    }
  })
  // console.log('首页饼图数据---------->', normalSum, warningLevelSum1, warningLevelSum2)
  // 初始化Echarts图
  initChart()
}

// 选择堆取料机
const selectDevice = (num: number) => {
  console.log('选择设备', num)
  selectMenuPath.value = []
  dialogVisible.value = true
  switch (num) {
  case 1:
    device.value = '12000t/h堆取料机'
    console.log('12000t/h堆取料机')
    selectMenuPath.value = list1.value
    path.value = '/menu/riZhaoPort/company1/RZG_2_equipment/'
    break
  case 2:
    device.value = '9000t/h堆料机'
    console.log('9000t/h堆料机')
    selectMenuPath.value = list2.value
    path.value = '/menu/riZhaoPort/company1/RZG_2_equipment2/'
    break
  case 3:
    device.value = '4200t/h堆料机'
    console.log('4200t/h堆料机')
    selectMenuPath.value = list3.value
    path.value = '/menu/riZhaoPort/company1/RZG_2_equipment3/'
    break
  case 4:
    device.value = '5500t/h堆料机'
    console.log('5500t/h堆料机')
    selectMenuPath.value = list3.value
    path.value = '/menu/riZhaoPort/company1/RZG_2_equipment4/'
    break
  case 5:
    device.value = '4200t/h取料机'
    console.log('4200t/h取料机')
    selectMenuPath.value = list5.value
    path.value = '/menu/riZhaoPort/company1/RZG_2_equipment1/'
    break
  }
  console.log('选择设备-------->', selectMenuPath.value)
}

const selectTargetDevice = (val:string) => {
  console.log('选择的具体设备----->',val, selectMenuPath.value)
  targetDevice.value = val
}

// 跳转页面
const jumpToPage = () => {
  dialogVisible.value = false
  let path3D:string
  if(device.value.split('h')[1] === '取料机') {
    path3D = '_three_dimensional-Q'
  } else if(device.value.split('h')[1] === '堆料机') {
    path3D = '_three_dimensional-D'
  } else {
    path3D = '_three_dimensional-DQ'
  }
  // /menu/riZhaoPort/company1/RZG_2_equipment2/RZG_2_MS4_doulun/RZG_2_MS4_three_dimensional-D
  // /menu/riZhaoPort/company1/RZG_2_equipment2/RZG_2_MS4_doulun/RZG_2_MS4_three_dimensional-DQ
  let targetPath = path.value + `${targetDevice.value}_doulun/${targetDevice.value + path3D}`
  console.log('跳转路由---->', targetPath)
  router.push(targetPath)
  
  localStorage.ResetRouter = '/' + menuPath.value + path.value
  menuPath.value = ''
}

// 销毁Echarts
onBeforeUnmount(() => {
  chart.value.dispose()
})
</script>

<template>
  <div class="left-list-main-box">
    <div class="base-info-box">
      <div>设备基础信息</div>
      <div
        v-if="list1.length"
        class="info-box"
      >
        &emsp;&emsp;<span>12000/h堆取料机</span>&emsp;&emsp;&emsp;&emsp;&ensp;<span @click="selectDevice(1)">数量(台):{{ list1.length }}</span>
      </div>
      <div
        v-if="list2.length"
        class="info-box"
      >
        &emsp;&emsp;<span>9000/h堆料机</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span @click="selectDevice(2)">数量(台):{{ list2.length }}</span>
      </div>
      <div
        v-if="list3.length"
        class="info-box"
      >
        &emsp;&emsp;<span>4200/h堆料机</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span @click="selectDevice(3)">数量(台):{{ list3.length }}</span>
      </div>
      <div
        v-if="list4.length"
        class="info-box"
      >
        &emsp;&emsp;<span>5500/h堆料机</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span @click="selectDevice(4)">数量(台):{{ list4.length }}</span>
      </div>
      <div
        v-if="list5.length"
        class="info-box"
      >
        &emsp;&emsp;<span>4200/h取料机</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span @click="selectDevice(5)">数量(台):{{ list5.length }}</span>
      </div>
    </div>
    <div class="run-state-box">
      <div class="title-box">
        运行状态分析
      </div>
      <div id="echart" />
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="选择模型"
      width="20%"
      center
      draggable
    >
      <div
        class="model-select-box"
        style="width: 100%;"
      >
        <el-select
          v-model="menuPath"
          placeholder="请选择机器"
          @change="selectTargetDevice"
        >
          <template #prefix>
            <span>堆取料机</span>
          </template>
          <el-option
            v-for="item in selectMenuPath"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          />
        </el-select>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
            @click="jumpToPage"
          >
            跳转
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.left-list-main-box {
  width: 100%;
  height: 100%;

  >div {
    margin-top: 8px;
    background-image: url("../../../assets/imgs/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .base-info-box {
    width: 100%;
    height: 47%;

    >div {
      display: flex;
      align-items: center;
      width: 90%;
      height: 40px;
      margin-left: 15px;
      color: #fff;
    }

    .info-box {
      margin-top: 4px;
      border-bottom: 1px solid #68d8fe;

      >span {
        color: #fff;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .run-state-box {
    width: 100%;
    height: 50%;
    color: #fff;

    .title-box {
      display: flex;
      align-items: center;
      width: 90%;
      height: 40px;
      margin-left: 15px;
    }

    #echart {
      width: 100%;
      height: 90%;
    }
  }

  .model-select-box {
    display: flex;
    justify-content: center;
  }
}
</style>